<template>
<div id="Login">
    <loginHeader>
        <van-icon slot="a" name="arrow-left" size="20px" color="white" @click="handleBack()"/>
        <span slot="b">登录</span>
    </loginHeader>
    <div><input type="text" placeholder="请输入手机号" v-model="text1"></div>
    <div class="sec_inp" v-show="isHidden"><input type="password" placeholder="请输入密码" v-model="pword" ref="pd"><div class="ic" v-show="eyeClose"><van-icon name="closed-eye" size="20px" @click="handlepw()"/></div><div class="ic" v-show="eyeOpen"><van-icon name="eye-o" size="20px" @click="handlepw()"/></div></div>
    <div class="sec_inp" v-show="isShow"><input type="password" placeholder="请输入短信验证码" v-model="code"><button id="code">获取验证码</button></div>
    <div class="fir_btn"><button class="login" @click="Login()">登录</button></div>
    <div class="sec_btn" v-show="isHidden"><button class="phone" @click="mesg()">手机短信登录</button></div>
    <div class="sec_btn" v-show="isShow"><button class="phone" @click="mesg()">账号密码登录</button></div>
    <div class="sp" v-show="isHidden">
        <span class="fir" @click="regis()">立即注册</span>
        <span><a href="">找回密码</a></span>
    </div>
    <div class="sp" v-show="isShow">
        <span @click="regis()">手机号快速注册></span>
    </div>
    <p>
        登录即代表您已经同意<a href="">《用户协议》</a>和<a href="">《隐私政策》</a>
    </p>
</div>
</template>
<script>
import Vue from 'vue'
import { Icon, Toast } from 'vant'
import { mapMutations } from 'vuex'
import loginHeader from '@/views/Login/Login_header'
Vue.use(Icon)
export default {
  data () {
    return {
      eyeOpen: false,
      eyeClose: true,
      isShow: false,
      isHidden: true,
      text1: '',
      pword: '',
      code: ''
    }
  },
  components: {
    loginHeader
  },
  methods: {
    ...mapMutations(['showAsides', 'hideAsides']),
    handlepw () {
      this.eyeOpen = !this.eyeOpen
      this.eyeClose = !this.eyeClose
      if (this.$refs.pd.type === 'password') {
        this.$refs.pd.type = 'text'
      } else {
        this.$refs.pd.type = 'password'
      }
    },
    mesg () {
      this.isShow = !this.isShow
      this.isHidden = !this.isHidden
    },
    regis () {
      this.$router.push('/register')
    },
    Login () {
      if (this.text1 && (this.pword || this.code)) {
        localStorage.setItem('username', this.text1)
        localStorage.setItem('password', this.pword)
        localStorage.setItem('code', this.code)
        this.$router.push('/center/home')
        Toast('登录成功')
      } else {
        Toast('请输入正确信息')
      }
    },
    handleBack () {
      if (localStorage.getItem('cookie')) {
        this.$router.push('/center/home')
      } else {
        Toast('需要用户登录')
      }
    }
  },
  mounted () {
    this.hideAsides()
  },
  destroyed () {
    this.showAsides()
  }
}
</script>
<style lang="scss" scoped>

    #Login{
        .sec_inp{
              top:240px
            }
        .fir_btn{
            top:300px
        }
        .sec_btn{
            top:360px
        }
        div{
            width:300px;
            position: fixed;
            top:180px;
            left:50%;
            margin-left:-150px;
            margin-bottom:10px;
            input{
                width: 100%;
                border:none;
                border-bottom:1px solid #ddd;
                padding-bottom:10px;
            }
            .ic{
                width: 50px;
                left:85%;
                margin-left:0;
                border:none;
                top:240px;
            }
            button{
                width: 100%;
                height:45px;
                line-height: 45px;
                text-align: center;
                border:none;
                border-radius: 5px;
                font-size:17px
            }
            #code{
                position:fixed;
                top:225px;
                left:245px;
                width: 80px;
                height: 35px;
                line-height:35px;
                border:none;
                border:1px solid #aaa;
                color:#aaa;
                text-align:center;
                background-color: #fff;
                font-size:12px
            }
            .login{
                background-color: rgb(245, 70, 70);
                color:#eee
            }
            .phone{
                background-color: #fff;
                border:1px solid rgb(245, 70, 70);
                color:rgb(245, 70, 70)
            }
        }
        .sp{
            width:250px;
            position: fixed;
            top:420px;
            left:50%;
            margin-left:-125px;
            color:#eee;
            font-size:14px;
            text-align:center;
            span{
                margin-left:10px;
                color:#aaa;
                a{
                    color:#aaa;
                }
            }
            .fir::after{
                content:'';
                border:1px solid #ddd;
                height:1px;
                width:1px;
                margin-left:10px
            }
        }
        p{
            width:280px;
            position: fixed;
            top:540px;
            left:50%;
            margin-left:-140px;
            font-size:12px;
            color:#aaa;
            text-align:center
            a{
                color:#000
            }
        }
    }

</style>
